<template>
  <div class="com-container">
    <div class="com-chart" ref="video_ref">
      <div>
        <!-- 定义播放器dom -->
        <div id="J_prismPlayer" class="prism-player"/>
      </div>
    </div>
  </div>
</template>
<script>
import vod from '@/api/video/vod'

export default {
  props:['figureId'],
  data () {
    return {
      playAuth: '',
    }
  },
  created () {
  },
  mounted () { //页面渲染之后  created
    this.init()
  },
  methods: {
    async init () {
      const res = await vod.getPlayAuth(this.figureId)
      this.playAuth = res.data.video.playAuth
      this.vid = res.data.video.vid
      const height = this.$refs.video_ref.offsetHeight + 'px'
      new Aliplayer({
        id: 'J_prismPlayer',
        vid: this.vid, // 视频id
        playauth: this.playAuth, // 播放凭证
        encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
        width: '100%',
        height: height,
        // // 以下可选设置
        // cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
        qualitySort: 'asc', // 清晰度排序
        mediaType: 'video', // 返回音频还是视频
        autoplay: false, // 自动播放
        isLive: false, // 直播
        rePlay: false, // 循环播放
        preload: true,
        controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
        useH5Prism: true, // 播放器类型：html5
      }, function (player) {
        console.log('播放器创建成功')
      })
    }
  }
}
</script>

<style scoped>

</style>
